<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>component_composing</title>
</head>
<body>
<div id="example"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--引入prop-type库-->
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
    /*
    *问题：数据保存在哪个组件内？ Counter
    *   看组件是某个组件需要（给自己）还是某些组件需要（共同父组件）
    * 问题2：子组件中改变父组件状态
    *       子组件中不能直接改变父组件状态
    *       状态在哪个组件，更新状态的行为就应该定义在哪个组价
    *       解决方案：父组件定义，子组件调用
    * 组件化编写功能的流程
    *   1.拆分组件
    *   2.实现静态组件
    *   3.实现动态组件
    *       1>实现初始化数据动态显示
    *       2>实现交互功能
    * */
    // 1.定义组件
    class Counter extends React.Component {
        constructor (props) {
            super(props)
            // 初始化状态
            this.state = {
                todos: ['吃饭', '睡觉', '打豆豆']
            }
            this.add = this.add.bind(this)
        }
        add (todo) {
            const {todos} = this.state
            todos.unshift(todo)
            //更新状态
            this.setState({todos})
        }
        render () {
            const {todos} = this.state
            return (
                <div>
                    <TodoAdd add={this.add} count={todos.length} />
                    <TodoList todos={todos} />
                </div>
            )
        }
    }

    // 添加todo组件
    class TodoAdd extends React.Component {
        constructor (props) {
            super(props)
            this.addTodo = this.addTodo.bind(this)
        }
        addTodo () {
            // 读取输入数据
            const text = this.input.value.trim()
            // 查检
            if(!text) {
                return
            }
            // 保存到todos
            this.props.add(text)
            // 清除输入
            this.input.value = ''
        }
        render () {
            return (
                <div>
                    <h2>Simple TODO List</h2>
                    <input type="text" ref={input => this.input=input}/>
                    <button onClick={this.addTodo}>Add #{this.props.count+1}</button>
                </div>
            )
        }
    }
    TodoAdd.propTypes = {
        add: PropTypes.func.isRequired,
        count: PropTypes.number.isRequired
    }

    // todo列表组件
    class TodoList extends React.Component {
        render () {
            const {todos} = this.props
            return (
                <ul>
                    {
                        todos.map((todo, index) => <li key={index}>{todo}</li>)
                    }
                </ul>
            )
        }
    }
    TodoList.propTypes = {
        todos: PropTypes.array.isRequired
    }

    // 渲染应用组件标签
    ReactDOM.render(<Counter />, document.getElementById('example'))

</script>
</body>
</html>